<template>
	<view>
		<view class="header">
			<view class="navbar">
				<view class="navbar-fixed">
					<!-- 状态栏小程序撑起高度 -->
					<view :style="{ height: statusBarHeight + 'px' }"></view>
					<view class="navbar-content" :style="{ height: navBarHeight + 'px', width: windowWidth + 'px' }">
						<image src="../../static/jt6.png" @click="back()"></image>
						<view class="navbar-search">选择小区</view>
					</view>
				</view>
				<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）indexOf-->
				<view :style="{ height: statusBarHeight + navBarHeight + 'px' }"></view>
			</view>
			<view class="infobox">
				<view>请选择小区</view>
				<view style="font-size: 30rpx; font-weight: 400; margin-top: 20rpx">便于我们为你提供最佳服务</view>
				<!-- <image src="../../static/tit.png"></image> -->
			</view>
		</view>
		<view class="searchbox">
			<image src="../../static/ss.png"></image>
			<view
				style="display: flex; align-items: center; margin-left: 10rpx"
				@click="showAddress()"
				:style="{
					color: area_id ? '#FF8A9B' : '',
				}"
			>
				位置
				<uni-icons
					type="bottom"
					size="14"
					:color="{
						color: area_id ? '#FF8A9B' : '',
					}"
				></uni-icons>
			</view>
			<input style="flex: 1; margin-left: 10rpx" v-model="keyword" placeholder="搜索名称" />
			<view class="ssbut" @click="search">搜索</view>
		</view>
		<modal :show="addressShow">
			<Vaddress :last-level="2" @select="setAddress"></Vaddress>
		</modal>
		<view class="selectcom">
			{{ name.name || list[0].name || "" }}
			<view class="replace" @click="getplace()">
				<image src="../../static/dian.png"></image>
				<view>重新定位</view>
			</view>
		</view>
		<view class="newlist" v-for="(item, index) in list" :key="index" @click="changeitem(index, item)">
			<view class="leftbox">
				<image :src="item.img"></image>
			</view>
			<view class="rightbox">
				<view class="namebox">
					<view class="name">{{ item.name }}</view>
					<view class="distance" v-if="item.distance == '99999km'">未设置位置</view>
					<view class="distance" v-else>{{ item.distance }}</view>
				</view>
				<view class="address">{{ item.address }}</view>
			</view>
		</view>
		<kong v-if="!list.length && !loading"></kong>
		<!-- <view class="listbox">
			<view class="listitem" v-for="(item,index) in list" :key="index" @click="changeitem(index,item)"
			:style="{'background':currone==index?'#FF8A9B':'','color':currone==index?'#FFF':''}">
				<view>{{item.name}}</view>
			</view>
		</view>
		<view style="height: 130rpx;"></view>
		<view class="navbut" @click="setaddress()">
			<view>确定</view>
		</view> -->
	</view>
</template>

<script>
import modal from "../../pages/goodscourses/components/modal.vue"
import Vaddress from "../../pages/goodscourses/components/address.vue"
import kong from "../../components/kong.vue"
export default {
	components: {
		Vaddress,
		modal,
		kong,
	},
	data() {
		return {
			statusBarHeight: 20,
			/* 状态栏高度 */
			navBarHeight: 45,
			/* 导航栏高度 */
			windowWidth: 375,
			/* 窗口宽度 */
			/* 设定状态栏默认高度 */
			currone: null,
			list: [], //社区列表
			keyword: "",
			name: uni.getStorageSync("address") || {},
			area_id: "",
			addressShow: false,
			loading: false,
		}
	},
	onLoad() {
		uni.getLocation({
			success: (res) => {
				this.getcommunity(res.longitude, res.latitude)
			},
			fail: (err) => {
				this.getcommunity()
			},
		})
		this.getnav()
		// this.getplace()
	},
	methods: {
		search() {
			if (this.keyword) {
				this.getcommunity()
			} else {
				uni.getLocation({
					success: (res) => {
						this.getcommunity(res.longitude, res.latitude)
					},
				})
			}
		},
		setAddress(e) {
			this.area_id = e.id
			this.hideAddress()
			this.getcommunity()
		},
		showAddress() {
			if (this.addressShow) {
				this.hideAddress()
				return
			}
			this.addressShow = true
		},
		hideAddress() {
			this.addressShow = false
		},
		getnav() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
			this.statusBarHeight = info.statusBarHeight
			this.windowWidth = info.windowWidth
			// 除了h5 app mp-alipay的情况下执行
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			console.log(menuButtonInfo)
			// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
			this.navBarHeight = menuButtonInfo.bottom - info.statusBarHeight + (menuButtonInfo.top - info.statusBarHeight)
			this.windowWidth = menuButtonInfo.left
			// #endif
		},
		changeitem(index, item) {
			this.currone = index
			this.setaddress()
		},
		setaddress() {
			uni.setStorageSync("address", this.list[this.currone])
			this.$http({
				url: "/api/Activity/bind_communit",
				data: {
					id: this.list[this.currone].id,
				},
			}).then((res) => {
				uni.showToast({
					title: res.msg,
					icon: "none",
				})
				uni.switchTab({
					url: "/pages/index/index",
				})
			})
		},
		// getplace() {
		// 	let that = this
		// 	// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
		// 	uni.getSetting({
		// 		success(res) {
		// 			// 如果没有授权
		// 			if (!res.authSetting["scope.userLocation"]) {
		// 				// 则拉起授权窗口
		// 				uni.authorize({
		// 					scope: "scope.userLocation",
		// 					success() {
		// 						uni.onLocationChange(function (res) {
		// 							that.getcommunity(res.longitude, res.latitude)
		// 						})
		// 					},
		// 					fail(error) {
		// 						//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
		// 						console.log("拒绝授权", error)

		// 						uni.showModal({
		// 							title: "提示",
		// 							content: "若不授权地理位置，小程序部分功能将无法正常使用",
		// 							cancelText: "不授权",
		// 							cancelColor: "#999",
		// 							confirmText: "授权",
		// 							confirmColor: "#FF8A9B",
		// 							success(res) {
		// 								console.log(res)
		// 								if (res.confirm) {
		// 									// 选择弹框内授权
		// 									uni.openSetting({
		// 										success(res) {
		// 											console.log(res.authSetting)
		// 										},
		// 									})
		// 								} else if (res.cancel) {
		// 									// 选择弹框内 不授权
		// 									console.log("用户点击不授权")
		// 								}
		// 							},
		// 						})
		// 					},
		// 				})
		// 			} else {
		// 				// 有权限则直接获取
		// 				// let that = this
		// 				uni.onLocationChange(function (res) {
		// 					console.log("纬度：" + res.latitude)
		// 					console.log("经度：" + res.longitude)
		// 					that.getcommunity(res.longitude, res.latitude)
		// 				})
		// 			}
		// 		},
		// 	})

		// 	// uni.openLocation({
		// 	// 	latitude: this.latitude,
		// 	// 	longitude: this.longitude,
		// 	// 	name: '郑州市二七区',//去哪的名字
		// 	// 	address: '郑州市二七区航海中路60号海为科技园C区10层'//地址
		// 	// });
		// },
		getcommunity(longitude, latitude) {
			uni.showLoading({})
			this.loading = true
			this.$http({
				url: "/api/Activity/community_list",
				data: {
					keyword: this.keyword,
					page: 1,
					limit: 99999,
					area_id: this.area_id,
					...(latitude && longitude
						? {
								lat: latitude || "",
								long: longitude || "",
						  }
						: {}),
				},
			})
				.then((res) => {
					this.list = res.data
				})
				.finally(() => {
					uni.hideLoading()
					this.loading = false
				})
		},
		back() {
			uni.navigateBack({
				delta: 1,
			})
		},
	},
}
</script>

<style>
page {
	background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.header {
	height: 356rpx;
	background: url($uni-url + "/bg4.png") no-repeat;
	width: 100%;
	background-size: 100% 356rpx;
}

.navbar {
	.navbar-fixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 399;
		width: 100%;
		// height: 102rpx;
		// padding-bottom: 20rpx;
		background: transparent;

		.navbar-content {
			display: flex;
			// justify-content: center;
			align-items: center;
			padding: 0rpx 30rpx;
			// height: 142rpx;
			box-sizing: border-box;

			image {
				width: 44rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.navbar-search {
				display: flex;
				align-items: center;
				// padding: 0 10px;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222;
				position: absolute;
				left: 50%;
				transform: translate(-50%, 0);
			}
		}
	}
}

.infobox {
	width: 690rpx;
	margin: 60rpx auto 0 auto;
	font-size: 48rpx;
	font-family: Source Han Sans CN-Medium, Source Han Sans CN;
	font-weight: 500;
	color: #222222;

	image {
		width: 75rpx;
		height: 12rpx;
	}
}

.searchbox {
	width: 660rpx;
	height: 70rpx;
	background: #ffffff;
	border-radius: 36rpx;
	border: 2rpx solid #e2e2e2;
	margin: 40rpx auto 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0 0 30rpx;

	image {
		width: 33rpx;
		height: 28rpx;
	}

	.ssbut {
		width: 112rpx;
		height: 70rpx;
		background: #ff8a9b;
		border-radius: 36rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #f7f7f7;
		text-align: center;
		line-height: 70rpx;
	}
}

.selectcom {
	height: 110rpx;
	width: 690rpx;
	margin: 0 auto;
	display: flex;
	align-items: center;
	border-bottom: solid 2rpx #ececec;
	justify-content: space-between;

	.replace {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #ff8a9b;

		image {
			width: 25rpx;
			height: 25rpx;
			margin-right: 10rpx;
		}
	}
}

.newlist {
	width: 690rpx;
	height: 130rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;

	.leftbox {
		width: 104rpx;

		image {
			width: 90rpx;
			height: 90rpx;
		}
	}

	.rightbox {
		width: 586rpx;

		.namebox {
			display: flex;
			align-items: center;

			.name {
				width: 500rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.distance {
				width: 86rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
			}
		}

		.address {
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #555555;
		}
	}
}

.listbox {
	display: flex;
	flex-wrap: wrap;
	width: 690rpx;
	margin: 40rpx auto 0 auto;

	.listitem {
		width: fit-content;
		height: 74rpx;
		background: #fff6f8;
		border-radius: 38rpx;
		padding: 0 35rpx;
		line-height: 74rpx;
		margin-right: 24rpx;
		margin-bottom: 20rpx;
	}

	// .listitem:last-child {
	// 	margin-bottom: 20rpx;
	// 	margin-right: 0;
	// }
}

.navbut {
	width: 750rpx;
	height: 120rpx;
	background: #fff;
	border-radius: 83rpx;
	position: fixed;
	left: 50%;
	transform: translate(-50%, 0);
	bottom: 0;

	> view {
		font-size: 36rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
		width: 690rpx;
		margin: 0 auto;
		height: 96rpx;
		background: #ff8a9b;
		border-radius: 83rpx;
		text-align: center;
		text-emphasis-color: center;
		line-height: 96rpx;
	}
}
</style>
